<template>
  <div>App</div>
  <p>{{ name }}---{{ age }}</p>

  <button @click="changeCat">狸猫换太子</button>
</template>

<script lang="ts">
import { defineComponent, ref, toRefs} from 'vue'
export default defineComponent({
  name: 'App',
})
</script>
<script setup lang="ts">
//ref创建的数据被替换的时候，替换的是ref对象的value属性，具有响应式
const cat = ref({name:"maomi",age:3})
console.log(cat)

const changeCat = () =>{
  cat.value.name="xiaohuang";
  cat.value.age = 4;
}

//在解构代理对象的时候，希望可以使用toRefs方法包裹住代理对象解构
//解构出来的值就是ref对象，具有响应式，在逻辑中使用的时候要添加 .value

const {name , age } = toRefs(cat.value)
console.log(name,age)
</script>
<style lang="less" scoped>

</style>